/* eslint-disable react-hooks/exhaustive-deps */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import ReactDOM from 'react-dom';
import { useRef, useEffect, useState } from 'react';
import {useMap } from '@uiw/react-baidu-map';

interface propsType{
    address:string
}
const Index = (props:propsType) => {
  const divElm :any= useRef();
  const {address}=props
  const [zoom, setZoom] = useState(10)
  const { setContainer, map, setCenter, setAutoLocalCity } = useMap({
    enableScrollWheelZoom: true, // 启用滚轮放大缩小，默认禁用
    center: address,
  });
  useEffect(() => {
    if (divElm.current && !map) {
      setContainer(divElm.current);
    }
  });

  useEffect(() => {
    if (map) {
      // 启用滚轮放大缩小，默认禁用
      map.setZoom(zoom);
    }
    setCenter(address)
  }, [zoom, map]);
  
  return (
    <>
      <button onClick={() => setZoom(zoom-1)}>-</button>
      <span>{zoom || 15}</span>
      <button onClick={() => setZoom(zoom+1)}>+</button>
      <button onClick={() => setCenter('北京')}>北京</button>
      <button onClick={() => setCenter('上海')}>上海</button>
      <button onClick={() => setAutoLocalCity(true)}>IP定位</button>
      <div ref={divElm} style={{ height: 350 }} />
    </>
  )
}

export default Index